
<template>
    <div class="login-container">
        <div class="login-box">
            <!-- login区域 -->
            <div class="login">
                <img src="../assets/logo.png" alt="">
            </div>

            <!-- form表单区域 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleFormref">
                <el-form-item prop="username">
                  <el-input
                   placeholder="登录名称"
                   prefix-icon="iconfont icon-user"
                   v-model="ruleForm.username">
                 </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                   placeholder="登录密码"
                   v-model="ruleForm.password" :type="ispwd ? 'password': 'text'">
                   <i slot="prefix" :class="['iconfont',ispwd ? 'icon-3702mima' : 'icon-showpassword']" @click="ispwd=!ispwd"></i>
                 </el-input>
                </el-form-item>
                <el-row>
                    <el-col>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="remove">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>    

        </div> 
    </div>
</template>

<script>
// 导入mixints 混入文件
import mix from './Login-mixints.js'
export default {
    mixins: [mix]
};
</script>

<style lang="less" scoped>
.login-container {
  background-color: #2b4b6b;
  height: 100%;

  .login-box {
    position: relative;
    width: 400px;
    height: 304px;
    background-color: white;
    top: 188px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .login {
      position: relative;
      width: 120px;
      height: 120px;
      border: 1px solid #eee;
      box-shadow: 0 1px 6px #eee;
      border-radius: 50%;
      padding: 10px;
      left: 50%;
      transform: translateX(-50%);
      top: -50px;
      background-color: white;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }

  .el-form {
      position: relative;
      top: -50px;
      padding: 20px;
    .el-col {
        display: flex;
        justify-content: flex-end;
    }
    .icon-3702mima,
    .icon-showpassword {
        transition: all .5s ease;
        cursor: pointer;
        &:hover {
            color: darkred;
        }
    }
  }
}
</style>

